<template>
  <div>
    <el-text class="header" type="primary">请补充其他资料</el-text>
    <!-- 经办人相关信息 -->
    <Handler ref="handlerRef" />
    <!-- 项目资料 -->
    <Project ref="projectRef" />
    <!-- 申请企业补充材料 -->
    <Enterprise ref="enterpriseRef" />
    <!-- 开票信息 -->
    <Invoice />
    <!-- 反担保相关信息 -->
    <Guarantee />
    <div class="footer">
      <el-button type="danger" @click="handleConfirm">确认提交</el-button>
    </div>
  </div>
</template>

<script setup>
// 经办人相关信息
import Handler from './components/handler.vue'
// 项目资料
import Project from './components/project.vue'
// 申请企业补充材料
import Enterprise from './components/enterprise.vue'
// 开票信息
import Invoice from './components/invoice.vue'
// 反担保相关信息
import Guarantee from './components/guarantee.vue'

const handlerRef = ref(null) // 经办人相关信息
const projectRef = ref(null) // 项目资料
const enterpriseRef = ref(null) // 申请企业补充材料
// 整体校验
const handleValidate = () => {
  // 经办人相关信息校验
  const v1 = new Promise((resolve, reject) => {
    handlerRef.value.validateForm()
    .then(data=>{
      resolve(data)
    })
  })
  // 项目资料校验
  const v2 = new Promise((resolve, reject) => {
    projectRef.value.validateForm()
    .then(data=>{
      resolve(data)
    })
  })
  // 申请企业补充材料
  // 项目资料校验
  const v3 = new Promise((resolve, reject) => {
    enterpriseRef.value.validateForm()
    .then(data=>{
      resolve(data)
    })
  })

  // 全部校验完成，返回数据
  return Promise.all([v1, v2, v3])
  .then(res => {
    console.log(res, '全部校验完成')
    return res.reduce((acc, obj) => {
      Object.assign(acc, obj)
      return acc
    }, {});
  })
}



// 设置当前步骤状态
const setStatus = inject('setStatus')
// 提交
function handleConfirm(params) {
  // handleValidate()
  // .then(res=>{
  //   console.log(res,333)
  // })
  // 设置状态
  setStatus('finish')
}
</script>

<style lang="scss" scoped>
.header{
  font-weight: 700;
  font-size: 30px;
  display: block;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 3px dashed var(--el-color-primary);
}
.footer{
  text-align: center;
  margin-top: 30px;
  :deep(.el-button){
    width: 260px;
    height: 80px;
    font-weight: 700;
    font-size: 28px;
    border-radius: 10px;
    &.el-button--danger{
      color: #F9F9F9;
      background-color: #FF141A;
    }
  }
}

// 公共样式
:deep(.card){
  & + .card{
    margin-top: 30px;
  }
  .card-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    &--content{
      display: flex;
      align-items: center;
    }
    .common-sub-title{
      margin-right: 10px;
      // display: block;
    }
  }
  .el-form{
    &-item__label{
      width: 140px;
    }
    .el-row {
      & > .el-form-item {
        flex: 1;
        & + .el-form-item {
          margin-left: 50px;
        }
      }
    }
  }
}
</style>
